// 这是管理页面的一部分请求
document.addEventListener('DOMContentLoaded', function() {
	console.log("调用了");
    // 模拟课程数据
    const courseData = [
        {
            id: 'COURSE_001',
            name: 'Python数据分析实战',
            image: 'path/to/course/image.jpg',
            duration: '12课节 | 36课时',
            instructor: '王明',
            submitTime: '2024-02-20 14:30',
            status: 'pending'
        }
    ];

    // 初始化
    renderCourseTable(courseData);
    initializeEventListeners();

    // 渲染课程表格
    function renderCourseTable(courses) {
        const tbody = document.getElementById('courseTableBody');
        tbody.innerHTML = '';
    
        // 添加表头行，包含全选复选框
        const thead = document.createElement('thead');
        thead.innerHTML = `
            <tr>
                <th>
                    <input type="checkbox" id="selectAll" class="select-all-checkbox">
                </th>
                <th>课程ID</th>
                <th>课程信息</th>
                <th>讲师</th>
                <th>提交时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        `;
        tbody.parentElement.insertBefore(thead, tbody);
    
        // 渲染课程数据行
        courses.forEach(course => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>
                    <input type="checkbox" class="row-checkbox" data-course-id="${course.id}">
                </td>
                <td>${course.id}</td>
                <td>
                    <div class="course-info">
                        <img src="${course.cover}" alt="${course.name}">
                        <div class="details">
                            <div class="course-name">${course.name}</div>
                            <div class="course-meta">${course.duration}</div>
                        </div>
                    </div>
                </td>
                <td>${course.instructor}</td>
                <td>${course.submitTime}</td>
                <td>
                    <span class="status-tag ${getStatusClass(course.cstatus)}">
                        ${getStatusText(course.cstatus)}
                    </span>
                </td>
                <td>
                    <button class="action-btn btn-view">查看详情</button>
                    ${course.status === 'pending' ? `
                        <button class="action-btn btn-approve">通过</button>
                        <button class="action-btn btn-reject">驳回</button>
                    ` : ''}
                </td>
            `;
            tbody.appendChild(tr);
        });
    
        // 添加全选/取消全选功能
        const selectAllCheckbox = document.getElementById('selectAll');
        const rowCheckboxes = document.querySelectorAll('.row-checkbox');
    
        // 全选框点击事件
        selectAllCheckbox.addEventListener('change', function() {
            const isChecked = this.checked;
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
            });
            updateBatchDeleteButton();
        });
    
        // 行复选框点击事件
        rowCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                // 检查是否所有行都被选中
                const allChecked = Array.from(rowCheckboxes).every(cb => cb.checked);
                const someChecked = Array.from(rowCheckboxes).some(cb => cb.checked);
                
                // 更新全选框状态
                selectAllCheckbox.checked = allChecked;
                selectAllCheckbox.indeterminate = someChecked && !allChecked;
                
                // 更新批量删除按钮显示状态
                updateBatchDeleteButton();
            });
        });
    }
	
	// 更新批量删除按钮显示状态
	function updateBatchDeleteButton() {
	    const rowCheckboxes = document.querySelectorAll('.row-checkbox');
	    const checkedBoxes = Array.from(rowCheckboxes).filter(cb => cb.checked);
	    const batchDeleteBtn = document.querySelector('.batch-delete');
	    
	    if (batchDeleteBtn) {
	        batchDeleteBtn.style.display = checkedBoxes.length > 0 ? 'inline-block' : 'none';
	    }
	}
    // 初始化事件监听器
    function initializeEventListeners() {
        // 状态筛选按钮
        const filterBtns = document.querySelectorAll('.filter-btn');
        filterBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                filterBtns.forEach(b => b.classList.remove('active'));
                this.classList.add('active');
                // 这里添加筛选逻辑
            });
        });

        // 分类和时间筛选
        const filters = document.querySelectorAll('select');
        filters.forEach(filter => {
            filter.addEventListener('change', function() {
                // 这里添加筛选逻辑
            });
        });

        // 分页按钮
        const pageBtns = document.querySelectorAll('.page-btn');
        pageBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (!this.classList.contains('prev') && !this.classList.contains('next')) {
                    pageBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                }
                // 这里添加分页逻辑
            });
        });
    }

    // 获取状态样式类
    function getStatusClass(status) {
        switch(status) {
            case 'pending': return 'status-pending';
            case 'approved': return 'status-approved';
            case 'rejected': return 'status-rejected';
            default: return '';
        }
    }

    // 获取状态文本
    function getStatusText(status) {
        switch(status) {
            case 'pending': return '待审核';
            case 'approved': return '已通过';
            case 'rejected': return '已驳回';
            default: return '';
        }
    }

    // 处理审核操作
    window.handleApprove = function(courseId) {
        console.log('通过课程:', courseId);
        // 实现审核通过逻辑
    };

    window.handleReject = function(courseId) {
        console.log('驳回课程:', courseId);
        // 实现审核驳回逻辑
    };
});